<template>
  <view class="work-page">
    <uni-collapse>
      <uni-collapse-item title="工艺要求">
        <text class="data-list-item-require">{{
          workMainData.require ? workMainData.require : ''
        }}</text>
      </uni-collapse-item>
    </uni-collapse>
    <!-- <view class="document_image" v-if="props.temp !== 6"> -->
    <view class="document_image" v-if="workMainData.document_image">
      <image
        :src="'data:image/jpeg;base64,' + workMainData.document_image"
        mode="aspectFit"
      ></image>
      <!-- <wd-img
        :width="300"
        :height="300"
        mode="aspectFit"
        :src="'data:image/jpeg;base64,' + workMainData.document_image"
        :enable-preview="true"
      /> -->
    </view>
    <view class="document_image" v-if="workMainData.document_image2">
      <image
        :src="'data:image/jpeg;base64,' + workMainData.document_image2"
        mode="aspectFit"
      ></image>
    </view>
    <view class="document_image" v-if="workMainData.document_image3">
      <image
        :src="'data:image/jpeg;base64,' + workMainData.document_image3"
        mode="aspectFit"
      ></image>
    </view>
    <view class="pass_allow">
      <!-- <text
        v-if="workMainData.temp === '4' || workMainData.temp === '5' || workMainData.temp === '2'"
        >允许误差:{{ workMainData.pass_allow }}，</text
      > -->
      <template v-if="workMainData.temp !== '3'">
        <text v-if="workMainData.pass_allow">允许误差:{{ workMainData.pass_allow }}</text>

        <text>最高温度:{{ workMainData.max_temperature }}°C </text>
        <text> 最大湿度:{{ workMainData.max_humidity }}%</text>
      </template>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  workMainData: Object,
  temp: Number,
})
</script>
<style lang="scss" scoped>
.work-page {
  padding: 5px;
  background: linear-gradient(135deg, #f8fafd 0%, #edf4ff 100%);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(26, 115, 232, 0.05);
  margin: 5px;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;

  /* 折叠面板优化 */
  // :deep(.uni-collapse) {
  //   border-radius: 16px;
  //   overflow: hidden;
  //   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  //   margin-bottom: 25px;

  //   .uni-collapse-item__title-box {
  //     background: linear-gradient(90deg, #1a73e8 0%, #0d47a1 100%);
  //     color: white !important;
  //     padding: 18px 20px;
  //     font-weight: 600;
  //     font-size: 18px;
  //     transition: all 0.3s;

  //     .uni-collapse-item__title-arrow {
  //       color: white !important;
  //       font-size: 20px !important;
  //       transition: transform 0.3s;
  //     }
  //   }

  //   .uni-collapse-item__content {
  //     background: white;
  //     padding: 20px;
  //   }
  // }

  // .data-list-item-require {
  //   display: block;
  //   padding: 15px;
  //   color: #4a5568;
  //   font-size: 16px;
  //   line-height: 1.6;
  //   background: #f9fafc;
  //   border-radius: 12px;
  //   box-shadow: inset 0 0 0 1px #e2e8f0;
  //   transition: all 0.3s;
  // }
  :deep(.uni-collapse-item__title-box) {
    padding: 0 10px;
    margin: 0;
    color: $uni-color-warning;
  }
  .data-list-item-require {
    //display: inline-block;
    display: block;
    padding: 0 20px;
    color: $text-font-color-2;
  }

  .document_image {
    width: fit-content;
    margin: 10px auto;
  }
  /* 图片展示区域优化 */
  // .document_image {
  //   margin: 20px 0;
  //   border-radius: 16px;
  //   overflow: hidden;
  //   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  //   transition: transform 0.3s, box-shadow 0.3s;
  //   background: white;
  //   padding: 10px;
  //   text-align: center;

  //   image {
  //     max-width: 100%;
  //     height: auto;
  //     border-radius: 12px;
  //     display: block;
  //     margin: 0 auto;
  //     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  //   }

  //   &:hover {
  //     transform: translateY(-3px);
  //     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  //   }
  // }

  /* 条件文本优化 */
  .pass_allow {
    margin-top: 15px;
    padding: 6px;
    background: linear-gradient(90deg, rgba(26, 115, 232, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;

    text {
      display: inline-block;
      margin: 0 8px;
      padding: 6px 14px;
      background: rgba(230, 67, 64, 0.1);
      border-radius: 50px;
      color: #e64340;
      font-weight: 600;
      font-size: 10px;
      transition: all 0.3s;

      &:hover {
        background: rgba(230, 67, 64, 0.2);
        transform: scale(1.05);
      }
    }
  }

  /* 响应式调整 */
  @media (max-width: 480px) {
    padding: 15px;
    margin: 10px;

    .document_image {
      margin: 15px 0;
    }

    .pass_allow text {
      display: block;
      margin: 8px 0;
    }
  }
}
</style>

<!-- <style lang="scss" scoped>
.work-page {
  .margin-top-bottom {
    margin: 10px 0;
  }
  :deep(.uni-collapse-item__title-box) {
    padding: 0 10px;
    margin: 0;
    color: $uni-color-warning;
  }
  .data-list-item-require {
    //display: inline-block;
    display: block;
    padding: 0 20px;
    color: $text-font-color-2;
  }
  .document_image {
    width: fit-content;
    margin: 10px auto;
  }
  .pass_allow,
  text {
    width: 100%;
    text-align: center;
    color: $uni-color-warning;
    font-size: 12px !important;
  }
}
</style> -->
